import React,{ Component,Fragment} from 'react';
import messageMC from '../static/css/message.module.css';
import {Icon} from 'antd';

class Message extends Component{
  constructor(props){
    super(props);
    this.state = {};
  }
  render(){
    let messageDom = null;
    if(this.props.left){
      messageDom = <Fragment><span className={messageMC.otherIcon}>
                      <Icon type="user" style={{fontSize:'25px',color:'#d7d7d7'}}></Icon>
                    </span>
                    <div>
                      <h3 className={messageMC.userName}>{this.props.name}</h3>
                      <span className={messageMC.otherMsgT}>
                        {this.props.msg}
                      </span>
                    </div>
                    </Fragment>;
    }
    else if(this.props.right){
      messageDom = <Fragment>
                    <b className={messageMC.sendState}>
                      <Icon type={this.props.states} style={this.props.states == 'loading'?{}:(this.props.states == 'check'?{color:'#52c41a'}:{color:'#ff718e'})}></Icon>
                    </b>
                    <span className={messageMC.myMsgT}>
                      {this.props.msg}
                    </span>
                    <span className={messageMC.myIcon}>
                      <Icon type="user" style={{fontSize:'25px',color:'#ffffff'}}></Icon>
                    </span>
                    
                    </Fragment>;
    }
    else if(this.props.center){
      messageDom = <Fragment>
        <span className={messageMC.tipMsgT}>
          {this.props.msg}
        </span>
      </Fragment>
    }
    return(
      <Fragment>
        {messageDom}
      </Fragment> 
     
    );
  }
}

export default Message;